Ext.define('BISC.view.FormCreateServer', {
    extend: 'Ext.panel.Panel',
    alias: ['widget.formcreateserver'],
    id: 'createServerPanel',
    border: false,

    initComponent: function() {
        var me = this;

        var form = Ext.create('Ext.form.Panel',{
            id: 'formCreateServer',
            bodyPadding: 10,
            border: false,
            items: [
                {
                    xtype: 'textfield',
                    fieldLabel: 'Server Name',
                    labelAlign: 'right',
                    anchor: '100%',
                    name: 'name'
                },
                {
                    xtype: 'textfield',
                    fieldLabel: 'Description',
                    labelAlign: 'right',
                    anchor: '100%',
                    name: 'description'
                },
                {
                    xtype: 'textfield',
                    fieldLabel: 'API Key',
                    labelAlign: 'right',
                    anchor: '100%',
                    name: 'key'
                },
                {
                    xtype: 'textfield',
                    fieldLabel: 'Host',
                    labelAlign: 'right',
                    anchor: '100%',
                    name: 'url'
                },
                {
                    xtype: 'textfield',
                    fieldLabel: 'API Path',
                    labelAlign: 'right',
                    anchor: '100%',
                    name: 'path'
                },
                {
                    xtype: 'checkbox',
                    inputValue: true,
                    fieldLabel: 'Enable?',
                    labelAlign: 'right',
                    anchor: '100%',
                    name: 'active'
                },
                {
                    xtype: 'hiddenfield',
                    name: 'id',
                    dataIndex: 'id'
                },
                {
                    xtype: 'hiddenfield',
                    name: 'cmd',
                    value: (this.mode == 'add') ? 'addServer' : 'updateServer'
                }
            ]
        });

        Ext.applyIf(me, {
            items: [
                form
            ],
            dockedItems: [
                {
                    xtype: 'toolbar',
                    ui: 'footer',
                    dock: 'bottom',
                    items: [
                        '->',
                        {
                            xtype: 'button',
                            text: ( this.record ) ? 'Update Server' : 'Add Server',
                            scope: me,
                            handler: this.submit
                        },
                        {
                            xtype: 'button',
                            text: 'Cancel',
                            scope: this,
                            handler: this.cancel
                        }
                    ]
                } 
            ]
        });

        me.callParent(arguments);
    },
    scope: this,
	listeners: {
		afterrender: function() {
			if ( this.mode != 'add' ) {
				// edit
                Ext.getCmp('formCreateServer').loadRecord( this.record );
			}
		}
	},
    submit: function() {
        var me = this;
		var form = Ext.getCmp('formCreateServer').getForm();
        form.url = 'http://localhost:8888/' + ((this.mode == 'add') ? 'addServer' : 'updateServer');
		if ( form.isValid() ) {
			form.submit({
                scope: this,
				success: function(form, action, a) {
                    me.ownerCt.fireEvent( 'done', Ext.decode(action.response.responseText) );
				},
				failure: function(form, action) {
                    Ext.Msg.alert( 'Failed', Ext.decode(action.response.responseText).error.message );
				}
			});
		}
    },
    cancel: function() {
        this.ownerCt.fireEvent( 'done' );
    }
});
